<template>
	<div style="verflow-x: hidden;width: 100%;" v-loading="loading">
		<!-- <div style="padding: 10px;border-radius: 8px;background: #fff;margin-bottom: 10px;justify-content: center;"
			class="displayFlex">
			<div class="date-item1 displayFlex">
				<el-select v-model="params.equipmentId" filterable remote placeholder="选择生产设施"
					:remote-method="remoteMethod" @change="getData()">
					<el-option v-for="item in productionList" :key="item.id" :label="item.equipmentName"
						:value="item.id">
					</el-option>
				</el-select>
				<i class="el-icon-arrow-down" style="margin-bottom: 0px;color: #999;"></i>
			</div>

			<div class="date-item1 displayFlex" style="margin-left: 20px;">
				<el-date-picker v-model="params.year" type="year" placeholder="选择年" format="yyyy"
					style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false" value-format="yyyy"
					@change="getData()">
				</el-date-picker>
				<i class="el-icon-arrow-down" style="margin-bottom: 0px;color: #999;"></i>
			</div>
		</div> -->

		<div style="display: flex;">
			<div style="flex:1;background:#041C62;color: #fff;position: relative;padding:64px 0;height: 968px;"
				class="mr10" v-if="dataList3">
				<div style="color:#689FFF;margin-left: 43px;" class="fomnt15 mb15">物料平衡</div>
				<div v-if="dataList3.productList && dataList3.productList.length == 0" class="pad20 mt20"
					style="color: #fff;">暂无物料平衡</div>

				<div style="max-height: 800px;overflow-y: auto;">
					<div v-for="(item,index) in dataList3.productList" :key="index" class="mb15">
						<div class="displayFlex" style="margin-bottom: 20px;margin-left: 43px;">
							<span style="background: #689FFF;height:20px;width: 3px;border-radius: 2px;"
								class="mr10"></span>
							<span class="font20">{{item.productName}}</span>
						</div>

						<div class="displayFlex ml10 point listItem"
							style="margin-bottom: 20px;background-size: 100% 100%;width: calc(100% - 20px);height: 112px;padding: 44px 32px;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon25.png')+')'}">
							<div style="border-radius: 12px;border: 1px solid#fff;;"
								class="bra8 font16 textCenter color1 listItem2">
								Month
							</div>
							<div class="ml10">
								<div style="" class="font16 mb5 colorfff">本月产量</div>
								<div class="font20" style="color: #75E7FF;">{{item.monthQty}}{{item.unitValue}}</div>
							</div>
						</div>

						<div class="displayFlex ml10 point listItem"
							style="margin-bottom: 20px;background-size: 100% 100%;width: calc(100% - 20px);height: 112px;padding: 44px 32px;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon25.png')+')'}">
							<div style="border-radius: 12px;border: 1px solid#fff;;"
								class="bra8 font16 textCenter color1 listItem2">
								Year
							</div>
							<div class="ml10">
								<div style="" class="font16 mb5 colorfff">年度产量</div>
								<div class="font20" style="color: #75E7FF;">{{item.yearQty}}{{item.unitValue}}</div>
							</div>
						</div>

						<div class="ml10"
							style="display: flex;background-size: 100% 100%;width: calc(100% - 20px);height: 112px;padding: 31px 32px 0;"
							:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon25.png')+')'}">
							<img src="../../assets/bigScreen/icon26.png" style="width: 56px;height: 46px;" />
							<div class="ml10">
								<div style="color: #fff;" class="font16 mb5">CO2</div>
								<div class="font20" style="color: #75E7FF;">{{item.cQty}}Kg</div>
							</div>
						</div>
					</div>
				</div>

				<img src="../../assets/bigScreen/icon27.png"
					style="position: absolute;top: 0.5%;right: -5px;width: 6px;height: 182px;" />
			</div>

			<div style="flex:5;display: flex;justify-content: space-between;">
				<div style="flex: 3;" class="mr15">
					<div style="background: #041C62;width: 100%;height: 586px;" class="  mb15">

						<div style="width: 100%;height: 32px;line-height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);
						font-family: Source Han Sans CN;font-weight: 400;font-size: 18px;color: #FFFFFF;display: flex;"
							class="mb10 font15">
							<div style="height: 100%;width: 140px;background-size: 100% 100%;padding-left: 11px"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon28.png')+')'}">
								原辅材料</div>
						</div>
						<div class="displayFlexBet">
							<div id="pieChart1" style="height: 200px;width: 50%;"></div>
							<div
								style="overflow-y: auto;display:flex;flex-wrap: wrap;height: 540px;width: 50%;padding-right: 60px;">
								<div class="w100" v-for="(item,index) in dataList3.materialList" :key="index">

									<div
										style="width: 459px;height: 1px;background: linear-gradient(90deg, #2D75F6, rgba(45,117,246,0));margin: 50px 0 20px;">
									</div>

									<div style="display: flex;justify-content: space-between;">
										<div style="flex:1;text-align: left;">
											<span :style="{'color':colorList1[index]}"
												style="margin-right: 3px;">0{{index+1}}.</span>
											<span class="colorfff font16">{{item.materialName}}</span>
										</div>
										<div style="text-align: right;">
											<div class="mb5 font20" style="color: #75E7FF;">
												用量{{item.qty}}{{item.unitValue}}</div>
											<div class="colorfff font14">单位用量{{item.unitQty}}{{item.unitValue}}</div>
										</div>
									</div>

								</div>

								<div v-if="dataList3.materialList && dataList3.materialList.length == 0"
									class="pad20 textCenter w100 font20" style="color: #fff;">
									暂无原辅料
								</div>
							</div>
						</div>
					</div>

					<div style="width: 100%;" class=" ">
						<div style="width: 100%;height: 32px;line-height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);
						font-family: Source Han Sans CN;font-weight: 400;font-size: 18px;color: #FFFFFF;display: flex;justify-content: space-between;"
							class="font15">
							<div style="height: 100%;width: 140px;background-size: 100% 100%;padding-left: 11px"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon28.png')+')'}">
								能源</div>
							<div style="padding-right: 12px;" class="font16">{{dataList3.energyList.length}}</div>
						</div>

						<div style="overflow-y: auto;display:flex;flex-wrap: wrap;height: 340px;background: #041C62;">
							<div class="mb10 w100 font14" v-for="(item,index) in dataList3.energyList" :key="index"
								style="display: flex;justify-content: space-between;padding: 0px 57px;border-bottom: 1px solid#1649A4;
								height: 60px;line-height: 60px;">
								<div style="flex:1" class="colorfff">
									<span v-if="index<9">0</span>
									<span>{{index+1}}.{{item.energyName}}</span>
								</div>
								<div style="flex:1" class="colorfff">单位用量{{item.unitQty}}{{item.unit}}</div>
								<div style="flex:1;text-align: right;" class="colorfff">用量{{item.qty}}{{item.unit}}
								</div>
							</div>
							<div v-if="dataList3.energyList && dataList3.energyList.length == 0"
								class="pad20 textCenter w100 font20" style="color: #fff;">
								暂无能源使用
							</div>
						</div>
					</div>
				</div>

				<div style="width: 302px;">
					<div style="background: #041C62;height: 482px;">
						<div style="width: 100%;height: 32px;line-height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);
						font-family: Source Han Sans CN;font-weight: 400;font-size: 18px;color: #FFFFFF;display: flex;justify-content: space-between;"
							class="mb10 font15">
							<div style="height: 100%;width: 140px;background-size: 100% 100%;padding-left: 11px"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon28.png')+')'}">
								废气排放</div>
						</div>

						<div
							style="overflow-y: auto;display:flex;flex-wrap: wrap;height: 380px;padding: 60px 0 30px 40px;">
							<div v-for="(item1,index1) in dataList3.gasPollutionList" style="width: 100%;"
								class="mb30 displayFlex">
								<div style="width: 4px;height: 48px;background: #1649A4;" class="mr20"></div>
								<div class="colorfff">
									<div class="mb5 font14">{{item1.pollutionName}}</div>
									<div class="font24" style="color: #75E7FF;">
										{{item1.amount == null?'--':item1.amount}}{{item1.unitValue}}
									</div>
								</div>
							</div>

							<div v-if="dataList3.gasPollutionList && dataList3.gasPollutionList.length == 0"
								class="pad20 textCenter w100" style="color: #999;">
								暂无废气排放
							</div>
						</div>
					</div>

					<div style="background: #041C62;height: 482px;" class="mt12">
						<div style="width: 100%;height: 32px;line-height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);
						font-family: Source Han Sans CN;font-weight: 400;font-size: 18px;color: #FFFFFF;display: flex;justify-content: space-between;"
							class="mb10 font15">
							<div style="height: 100%;width: 140px;background-size: 100% 100%;padding-left: 11px"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon28.png')+')'}">
								废水排放</div>
						</div>

						<div
							style="overflow-y: auto;display:flex;flex-wrap: wrap;height: 380px;padding: 60px 0 30px 40px;">
							<div v-for="(item1,index1) in dataList3.waterPollutionList" style="width: 100%;"
								class="mb30 displayFlex">
								<div style="width: 4px;height: 48px;background: #1649A4;" class="mr20"></div>
								<div class="colorfff">
									<div class="mb5 font14">{{item1.pollutionName}}</div>
									<div class="font24" style="color: #75E7FF;">
										{{item1.amount == null?'--':item1.amount}}{{item1.unitValue}}
									</div>
								</div>
							</div>

							<div v-if="dataList3.waterPollutionList && dataList3.waterPollutionList.length == 0"
								class="pad20 textCenter w100" style="color: #999;">
								暂无废水排放
							</div>
						</div>
					</div>
				</div>

				<div style="flex:2;margin-left: 12px;">

					<div style="background: #041C62;">
						<div style="width: 100%;height: 32px;line-height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);
						font-family: Source Han Sans CN;font-weight: 400;font-size: 18px;color: #FFFFFF;display: flex;justify-content: space-between;"
							class="mb10 font15">
							<div style="height: 100%;width: 140px;background-size: 100% 100%;padding-left: 11px"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon28.png')+')'}">
								危险废物</div>
						</div>

						<div>
							<div id="pieChart2" style="width: 100%;height: 200px;"></div>
							<div style="overflow-y: auto;height: 245px;padding:0 60px 0 40px;">
								<div v-for="(item1,index1) in dataList3.hw" style="width: 100%;height: 15px;"
									class="mb20 colorfff displayFlexBet">

									<div class="displayFlex">
										<div style="width: 3px;height: 16px;border-radius: 2px;"
											:style="{'background':colorList2[index1]}"></div>
										<div class="ml10 font14">{{item1.wasteName}}</div>
									</div>

									<div class="font16" style="color: #75E7FF;">
										{{item1.amount == null?'--':item1.amount}}{{item1.unitValue}}
									</div>
								</div>

								<div v-if="dataList3.hw && dataList3.hw.length == 0" class="pad20 textCenter w100"
									style="color: #fff;">
									暂无危险废物
								</div>
							</div>
						</div>
					</div>
					
					<div style="background: #041C62;">
						<div style="width: 100%;height: 32px;line-height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);
						font-family: Source Han Sans CN;font-weight: 400;font-size: 18px;color: #FFFFFF;display: flex;justify-content: space-between;"
							class="mb10 font15">
							<div style="height: 100%;width: 140px;background-size: 100% 100%;padding-left: 11px"
								:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon28.png')+')'}">
								一般工业固废</div>
						</div>
					
						<div>
							<div id="pieChart3" style="width: 100%;height: 200px;"></div>
							<div style="overflow-y: auto;height: 245px;padding:0 60px 0 40px;">
								<div v-for="(item1,index1) in dataList3.sw" style="width: 100%;height: 15px;"
									class="mb20 colorfff displayFlexBet">
					
									<div class="displayFlex">
										<div style="width: 3px;height: 16px;border-radius: 2px;"
											:style="{'background':colorList2[index1]}"></div>
										<div class="ml10 font14">{{item1.wasteName}}</div>
									</div>
					
									<div class="font16" style="color: #75E7FF;">
										{{item1.amount == null?'--':item1.amount}}{{item1.unitValue}}
									</div>
								</div>
					
								<div v-if="dataList3.sw && dataList3.sw.length == 0" class="pad20 textCenter w100"
									style="color: #fff;">
									暂无危险废物
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import {
		setTimeout
	} from 'core-js';
	import * as echarts from 'echarts';
	import moment from 'moment'

	let that
	export default {
		components: {},
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					equipmentId: '',
				},
				params2: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					day: "01",
					equipmentId: '',
				},
				recordDet: {},
				chooseProduct: {},
				loading: false,
				dialogVisible: false,
				dialogVisible2: false,
				productionList: [],
				dayList: [],
				monthDate: "",
				dataList1: [],
				dataList2: [],
				lastDay: 0,
				selectDay: "01",
				dataList3: {
					materialList: [],
					productList: [],
					energyList: [],
					parameterList: [],
					runtimeList: [],
				},
				dataList4: {},
				dataList5: [],
				dataList6: [],
				dataList7: [],
				dataList8: [],
				selectPrams: {},
				colorList1: ['#6204F1', '#D91749', '#FFDD00', '#DDDDE4'],
				colorList2: ['#CC0236', '#FF5400', '#FFA200', '#DDDDE4'],
				colorList3: ['#008B4B', '#21D026', '#04E38A', '#DDDDE4']
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.pageProductionEquipmentBase()
		},

		methods: {

			getData() {
				that.getProductionEquipmentDateStandingBookList()
				that.countProStdBookStatistics()
				that.countProStdBook()
				that.countEquipRunTime()

				//that.getEquipParameterList()
				that.getWaterEquipRunList()
				that.getGasEquipRunList()
			},


			getWaterEquipRunList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getWaterEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.paramList && item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'NORMAL') item2.bg = "#F6F7FB"
									if (item2.status == 'HISTORY_ABNORMAL') item2.bg = "##FFF8C4"
									if (item2.status == 'ABNORMAL') item2.bg = "##D10633"
								}
							}
						}
						that.dataList7 = result.data
					},
				})
			},

			getGasEquipRunList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getGasEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							if (item.paramList && item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'NORMAL') item2.bg = "#F6F7FB"
									if (item2.status == 'HISTORY_ABNORMAL') item2.bg = "##FFF8C4"
									if (item2.status == 'ABNORMAL') item2.bg = "##D10633"
								}
							}
						}
						that.dataList6 = result.data
					},
				})
			},

			countEquipRunTime() {
				that.ajax({
					url: '/productionEquipment/stdBook/getProdEquipRunList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList5 = result.data
					},
				})
			},

			countProStdBook() {
				that.ajax({
					url: '/productionEquipment/stdBook/countProStdBook',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList4 = result.data
					},
				})
			},

			countProStdBookStatistics() {
				that.ajax({
					url: '/productionEquipment/stdBook/countProStdBookStatistics',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList3 = result.data
						for (let item of that.dataList3.materialList) {
							item.name = item.materialName
							item.value = Number(item.qty)
						}

						for (let item of that.dataList3.hw) {
							item.name = item.wasteName
							item.value = Number(item.amount)
						}

						for (let item of that.dataList3.sw) {
							item.name = item.wasteName
							item.value = Number(item.amount)
						}

						setTimeout(function() {
							that.formPieChart("pieChart1", that.dataList3.materialList, true, that
								.colorList1)
							that.formPieChart("pieChart2", that.dataList3.hw, false, that.colorList2)
							that.formPieChart("pieChart3", that.dataList3.sw, false, that.colorList3)
						}, 1000)
					},
				})
			},

			formLineChart(day) {
				if (day) {
					if (day < 9) day = '0' + day
					else day = '' + day

					that.params2.day = day
				}
				that.lastDay = new Date(that.params.year, that.params.month, 0).getDate();
				that.ajax({
					url: '/productionEquipment/countDayRunHours',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						let dataList = result.data
						var chartDom = document.getElementById('chart3');
						var myChart = echarts.init(chartDom);
						var option;
						let seriesData = []
						let legendData = []

						for (let item of dataList) {
							legendData.push({
								'name': item.installationName
							})
							let seriesItem = {
								type: 'line',
								name: item.installationName,
								data: []
							}
							for (let item2 of item.dateList) {
								seriesItem.data.push([item2.date, item2.num])
							}
							seriesData.push(seriesItem)
						}

						option = {
							legend: {
								show: true,
								data: legendData
							},
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								type: 'time',
							},
							yAxis: {
								type: 'value',
								axisLabel: {
									show: false,
									textStyle: {
										color: '#D7D7D7', //文字颜色
									},
								},
							},
							series: seriesData
						};

						option && myChart.setOption(option);
					},
				})
			},

			formBarChart() {

				setTimeout(function() {
					that.ajax({
						url: '/productionEquipment/countMonthRunHours',
						data: JSON.stringify({
							equipmentId: that.params.equipmentId,
							recordDate: that.params2.year + "-" + that.params2.month + "-01"
						}),
						contentType: 'application/json',
						success: function(result) {
							let dataList = result.data
							let dimensions = ['product']
							let source = []
							let series = []
							let legendData = []
							let lastDay = new Date(that.params2.year, that.params2.month, 0).getDate();

							for (let item of dataList) {
								legendData.push({
									'name': item.installationName
								})
								dimensions.push(item.installationName)
								series.push({
									type: 'bar'
								})
							}

							for (let i = 1; i <= lastDay; i++) {
								let dateStr = i <= 9 ? '0' + i + "日" : i + "日"
								let _item = {
									'product': dateStr
								}
								for (let item of dataList) {
									for (let item2 of item.list) {
										if (item2.recordDateStr == _item.product) {
											_item[item.installationName] = item2.runHour
										}
									}

								}
								source.push(_item)
							}

							var chartDom = document.getElementById('chart2');
							var myChart = echarts.init(chartDom);
							let option = {
								legend: {
									show: true,
									//data: legendData
								},
								tooltip: {},
								dataset: {
									dimensions: dimensions,
									source: source
								},
								xAxis: {
									type: 'category'
								},
								yAxis: {
									type: 'value',
									axisLabel: {
										textStyle: {
											color: '#D7D7D7', //文字颜色
										},
									},
								},
								series: series
							};

							option && myChart.setOption(option, true);
						},
					})
				}, 1000)
			},

			formPieChart(chartId, seriesData, isBig, colorList) {
				//console.log(seriesData)
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					grid: {
						right: "5%",
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} ({d}%)'
					},
					legend: {
						show: false
					},
					color: colorList,
					series: [{
						//name: '去向',
						type: 'pie',
						radius: isBig ? [30, 80] : [30, 50],
						center: ['50%', '50%'],
						roseType: 'radius',
						data: seriesData,
						label: {
							normal: {
								show: false
							},
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				option && myChart.setOption(option);
			},

			countTotalRunHours() {
				that.ajax({
					url: '/productionEquipment/countTotalRunHours',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						let taotal = 0
						for (let item of result.data) {
							taotal += Number(item.runHour)
						}
						for (let item of result.data) {
							item.percent = (item.runHour / taotal) * 100
						}
						//console.log(result.data, taotal)
						that.dataList1 = result.data
						//that.formBarChart()
						//that.formLineChart()
					},
				})
			},

			saveStandingBook() {
				for (let item of that.recordDet.runtimeList) {
					if (item.runtimeList && item.runtimeList.length > 0) {
						for (let item2 of item.runtimeList) {
							item2.startTime = that.params.year + "-" + that.params.month + "-" + that.selectDay + " " +
								item2.startTime
							item2.endTime = that.params.year + "-" + that.params.month + "-" + that.selectDay + " " + item2
								.endTime
						}
					}
				}
				if (!that.recordDet.workStatus) return that.$message.error("状态必填")
				//console.log(that.recordDet.runtimeList)
				that.$confirm('是否确认保存?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/productionEquipment/saveStandingBook',
						contentType: 'application/json',
						data: JSON.stringify(that.recordDet),
						success: function(result) {
							that.$message.success("保存成功！")
							that.dialogVisible = false
							that.recordDet = {}
							that.pageProductionEquipmentBase()
						},
					})
				})
			},

			saveProduct() {
				if (!that.chooseProduct.qty && that.recordDet.workStatus != 'NOT_PRODUCE') return that.$message.error(
					"请输入产品的产量")
				that.chooseProduct.isSelect = true
				that.dialogVisible2 = false
			},

			chooseThisProduct(item) {
				that.chooseProduct = item
				that.dialogVisible2 = true
			},

			editThis(item) {
				that.selectDay = item.dateStr.split("日")[0]
				item.equipmentId = that.params.equipmentId

				that.ajax({
					url: '/productionEquipment/getStandingBookByDate',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						recordDate: item.fullDateStr
					}),
					success: function(result) {
						if (result.data.runtimeList && result.data.runtimeList.length > 0) {
							for (let item of result.data.runtimeList) {
								for (let item2 of item.runtimeList) {
									if (item2.startTime && item2.startTime.split(" ").length > 1) item2
										.startTime = item2.startTime.split(" ")[1]
									if (item2.endTime && item2.endTime.split(" ").length > 1) item2.endTime =
										item2.endTime.split(" ")[1]
								}
							}
						}
						//console.log(result.data)
						that.recordDet = result.data
						that.dialogVisible = true
					},
				})
			},

			recordOrder(item) {
				//console.log(item)
				that.selectDay = item.dateStr.split("日")[0]
				item.equipmentId = that.params.equipmentId

				if (item.standingBookId) return that.$refs.prodDayDet.open(item)

				that.ajax({
					url: '/productionEquipment/getStandingBookByDate',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						recordDate: item.fullDateStr
					}),
					success: function(result) {
						if (result.data.runtimeList && result.data.runtimeList.length > 0) {
							for (let item of result.data.runtimeList) {
								for (let item2 of item.runtimeList) {
									if (item2.startTime && item2.startTime.split(" ").length > 1) item2
										.startTime = item2.startTime.split(" ")[1]
									if (item2.endTime && item2.endTime.split(" ").length > 1) item2.endTime =
										item2.endTime.split(" ")[1]
								}
							}
						}
						//console.log(result.data)
						that.recordDet = result.data
						that.dialogVisible = true
					},
				})
			},

			gotoDet() {
				that.$router.push("/produceManage/orderDet?ticketId=" + that.params.ticketId + "&monthDate=" + that.params
					.year +
					"-" + that.params.month + "&equipmentId=" + that.params.equipmentId)
			},

			remoteMethod(query) {

			},

			//月度统计
			countProductionEquipmentProductStandingBook() {
				that.ajax({
					url: '/productionEquipment/countProductionEquipmentProductStandingBook?ticketId=' +
						that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						monthDate: that.params.year + "-" + that.params.month + "-01" // 月度时间
					}),
					success: function(result) {
						that.monthDate = result.data
					},
				})
			},

			getProductionEquipmentDateStandingBookList() {
				that.loading = true
				that.ajax({
					url: '/productionEquipment/getProductionEquipmentDateStandingBookList?ticketId=' +
						that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						monthDate: that.params.year + "-" + that.params.month + "-01" // 月度时间
					}),
					success: function(result) {

						for (let item of result.data) {
							if (item.workStatus && item.workStatus != 'NOT_PRODUCE') {
								item.bg = '#CCDDEF'
							} else {
								//item.bg = '#fff'
								item.bg = "#F2F2F2 "
							}
						}
						that.dayList = result.data

						that.countProductionEquipmentProductStandingBook()
						that.countTotalRunHours()
						that.loading = false
					},
				})
			},

			pageProductionEquipmentBase() {
				that.loading = true
				that.ajax({
					url: '/productionEquipment/pageProductionEquipmentBase?pageIndex=1' +
						'&pageSize=50&ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						ticketId: that.params.ticketId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.productionList = result.data.records
							if (that.productionList.length > 0 && !that.params.equipmentId) that.params
								.equipmentId = that.productionList[0].id
							that.getData()

						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.date-item1>>>.el-input__prefix,
	.date-item1>>>.el-input__suffix {
		display: none !important;
	}

	.date-item1>>>.el-input__inner {
		height: 20px !important;
		padding: 0 0px 0px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		color: #333 !important;
	}


	.date-item2>>>.el-input__prefix,
	.date-item2>>>.el-input__suffix {
		display: none !important;
	}

	.date-item2>>>.el-input__inner {
		height: 20px !important;
		padding: 0 0px 0px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		color: #3A3EF4 !important;
	}

	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.listItem {
		.listItem2 {
			padding: 10px 8px;
			color: #fff;
			width: 66px;
		}

		.color2 {
			color: #F9E429;
		}
	}

	.listItem:hover {
		.listItem2 {
			padding: 10px 8px;
			background: #A397EF !important;
			width: 66px;
		}

		.color2 {
			color: #A397EF !important;
		}

		.color3 {
			color: #A397EF !important;
		}
	}



	.listItem3 {
		color: #F9E429;
	}

	.listItem3:hover {
		color: #A397EF !important;
	}

	.listItem4:hover {
		color: #A397EF !important;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	.defenceSelectClass {
		color: #3a3ef4 !important;
		font-weight: bold;
	}


	.u-flex-1 {
		flex: 1;
	}

	.monthItem {
		color: #777777;
		cursor: pointer;
	}

	.itemSelected {
		border-radius: 50%;
		background: #3A3EF4;
		color: #fff !important;
	}

	.dot1 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #4475f3;
	}

	.dot2 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fb8981;
	}

	.dotLabel {
		margin-right: 5px;
		color: #999;
		font-size: 13px;
	}

	.defenceSelectClass {
		color: #3a3ef4 !important;
		font-weight: bold;
	}
</style>